<template>
    <!-- <div class="userTop"> -->
        <el-dropdown>
            <div class="user">
                <img src="../assets/images/logo.png" />
                <span style="margin-left: 10px;">{{ userInfo }}(管理员)</span>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="gotoLogin">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    <!-- </div> -->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import http from '@/util/api'
import router from '@/router';
import { ElMessage } from 'element-plus'

const userInfo = ref('')

onMounted(() => {
    http('/people', 'get').then((res: any) => {
        console.log(res)
        userInfo.value = res.data[0].account
    })
})

const gotoLogin=()=>{
    router.push('/login')
    ElMessage.success('退出登录成功')
}
</script>

<style lang="scss" scoped>
.el-dropdown {
    padding-right: 50px;
    box-sizing: border-box;
    float: right;

    :focus {outline: 0;}

    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .user {
        display: flex;
        align-items: center;
    }
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>
